<!--编辑组件-->
<div id="DepotEdit" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"  style=" height:100%;margin: 0px;padding: 0px;">
    <div id="bodyFrame"  class="panel panel-default" style="border-radius: 0px;">
        <div id="topBody"  class="panel-heading" style="padding: 10px">
            <h3 class="panel-title pull-left" > 修改实体 </h3>
            <button type="button" v-on:click="jumpToList()" class="btn btn-primary pull-right" style="margin-top: -7px">返回</button>
            <br/>
        </div>
        <div   id="centerBody" class="panel-body" >
            <!--表单部分-->
            <div class="col-md-12 column">
                <form class="form-horizontal" role="form" name="submitForm"  ref="submitForm"  v-bind:action="submitUrl">
                    <!--编辑条件-->
                    <template v-for="(item, index) in initSaveColumnList" >
                        <div class="form-group"  >
                            <label v-bind:for="'inputFile'+index" class="col-md-offset-2 col-md-2 control-label">{{item.title}}:</label>
                            <div class="col-md-4">
                                <!--普通-->
                                <template v-if="item.type == 0" >
                                    <input type="text"  v-model="saveDao[item.fieldName]" class="form-control" v-bind:id="'inputFile'+index" :disabled="!item.canEdit"/>
                                </template>
                                <!--图片-->
                                <img v-if="item.type == 1" :src="saveDao[item.fieldName] !=null ? $ImageUrl(saveDao[item.fieldName]) : '/img/fileIcon.jpg'"   class="img-thumbnail"  @click="selectImage(item.fieldName)" width="100" />
                                <!--字典 翻译-->
                                <template v-if="item.type == 2 && !item.canEdit" >
                                    <input type="input" :value="dict[item.dictCodeType].map[saveDao[item.fieldName]]" class="form-control" v-bind:id="'inputFile'+index" :disabled="!item.canEdit"/></span>
                                </template>
                                <template v-if="item.type == 2 && item.canEdit" >
                                    <!-- 渲染字典列表 -->
                                    <select   v-model="saveDao[item.fieldName]"  class="form-control" v-bind:id="'inputFile'+index"  >
                                        <template v-for="dictItem in dict[item.dictCodeType].list" >
                                            <option v-if="dictItem.codeCode == saveDao[item.fieldName]"  v-bind:value="dictItem.codeCode" selected>{{dictItem.codeValue }}</option>
                                            <option v-else v-bind:value="dictItem.codeCode">{{dictItem.codeValue }}</option>
                                        </template>
                                    </select>
                                </template>
                                <!--日期-->
                                <template v-if="item.type == 3" >
                                    <input type="input" :value="$formatDate('yyyy-MM-dd hh:mm:ss',saveDao[item.fieldName])" class="form-control" v-bind:id="'inputFile'+index" :disabled="!item.canEdit"/>
                                </template>

                            </div>
                        </div>
                    </template>
                    <div class="form-group">
                        <div class="col-md-offset-4 col-md-4">
                            <button type="button" v-on:click="submit" class="btn btn-primary btn-lg btn-block "   v-if="isShow">提交保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div   id="bottomBody" class="panel-footer" style="background-color: white;">
           <!--底部-->
        </div>
    </div>
</div>

<script>
    //采用vue
    var DepotEdit = new Vue({
        el: '#DepotEdit',
        data: {
            //提交的url
            submitUrl: '',
            //根据id查询对象的url
            queryUrl:'',
            //返回查询页面的url
            backUrl:'',
            //根据
            initSaveColumnUrl:Vue.prototype.getUrl('/pageInit/getInitEditPageDto/Depot'),
            saveDao:{},
            initSaveColumnList:[],
            dict:{},
            isEdit : false,
            isShow : true,
            nowSelImageField:'',
        },
        methods: {
            /**初始化*/
            init:function () {
                var that = this;
                this.$send(this.initSaveColumnUrl,null,function(data){
                    console.log('init执行成功！！'+JSON.stringify(data));
                    that.initSaveColumnList = data.initSaveColumnList;
                    that.submitUrl = data.saveUrl;
                    that.queryUrl = data.queryUrl;
                    that.backUrl = data.backUrl;
                    that.dict = data.dict;
                    //加载id对应的数据
                    that.loadEditData();
                });
            },
            jumpToList:function() {
                //加载页面
                loadPageToBodyMain(this.backUrl);
            },
            /**选择图片控件*/
            selectImage:function (fieldName){
                console.log('图片选择');
                //打开图片选择模态框
                this.$openImageComponent();
                //标记当前选择的图片控件
                this.nowSelImageField = fieldName;
            },
            selectedImageCallBack: function(imgId) {
                console.log('图片选择回调函数:'+imgId);
                //回写图片选择
                this.saveDao[this.nowSelImageField] = imgId;
            },
            /**根据id获取对应实体*/
            loadEditData(){
                //判断是否是修改
                if(sessionStorage.editId != null && sessionStorage.editId != 'null'){
                    console.log('editId=>'+sessionStorage.editId);
                    var that = this;
                    this.$send(this.queryUrl+sessionStorage.editId,null,function(data){
                        console.log('loadEditData成功！！'+JSON.stringify(data));
                        that.saveDao = data;
                    });
                    sessionStorage.editId = null;
                }
            },
            /** 提交 */
            submit: function() {
                if(!this.submitCheck()){ //数据校验
                    return false;
                }
                //走提交流程
                var that = this;
                this.$send(this.submitUrl,this.saveDao,function(data){
                    console.log('执行成功！！'+JSON.stringify(data));
                    that.isShow = false;
                    alert("保存成功");
                });
            },
            /** 提交表单前的验证*/
            submitCheck:function(){
                for(var i=0;i<this.initSaveColumnList.length;i++){
                    if(this.initSaveColumnList[i].required){
                        var testValue = this.saveDao[this.initSaveColumnList[i].fieldName];
                        if(testValue == null || testValue == '' || testValue == undefined){
                            alert('非空校验失败:['+this.initSaveColumnList[i].title+'],请完善!!');
                            return false;
                        }
                    }
                }
                return true;
            },

        },
        /**入参方法*/
        created: function () {
            this.init();
            var that_ = this;
            //重写图片选择回调方法
            Vue.prototype.selectedImg = function(imgId){
                that_.selectedImageCallBack(imgId);
            };
        },
    });
</script>
